<template>
  <div class="font-com" :style="{ backgroundColor: item.backgroundColor }">
    <div v-show="showDelete" class="list-item-delete">
      <span class="pull_left">{{ item.text }}</span>
      <span class="pull_right" @click.stop="deleteCurItem(item, index)"
        >删除</span
      >
    </div>
    <div
      v-if="item.stylesType == 0 && item.content"
      class="styleOne"
      :style="{ color: item.color, fontSize: item.fontSize + 'px' }"
      v-html="item.content.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp;')"
    ></div>
    <div v-if="item.stylesType == 1" class="styleTwo" :style="st">
      <div
        class="marquee_text"
        :style="{ color: item.color, fontSize: item.fontSize + 'px' }"
        v-html="item.content.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp;')"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    st() {
      return `--speedTiem:${this.item.speed}s;--marqueeWidth:${-this.item
        .content.length * this.item.fontSize};`;
    }
  },
  methods: {
    deleteCurItem(e, i) {
      this.$emit("deleteCurItem", e, i);
    }
  }
};
</script>

<style lang="scss" scoped>
.font-com {
  position: relative;
  background-color: #fff;
  .styleOne {
    padding: 10px;
  }
  .styleTwo {
    padding: 0 10px;
  }
}
@keyframes around {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: calc(var(--marqueeWidth) * 1px);
  }
}
.marquee_container {
  box-sizing: content-box;
  background-color: #fff;
  position: relative;
  width: 100%;
  margin-top: 0rpx;
}
.marquee_text {
  display: inline-block;
  padding: 10rpx 0;
  white-space: nowrap;
  animation-name: around;
  animation-duration: var(--speedTiem); /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
</style>
